
<template>
  <div class="index-box" ref="index">
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
    <div class="shop-box" v-loading="loading">
      <div class="d-flex">
        <div class="left">
          <el-form  :model="form" size="medium" ref="form"  class="form" :rules="rules" label-position="left" label-width="95px">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="headerTitle">活动信息</span>
              </div>
              <div  class="text item">
                <el-form-item label="活动名称" prop="activityName">
                  <el-input v-model="form.activityName" placeholder="请输入活动名称" maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="活动日期" prop="activityTime">
                  <el-date-picker v-model="form.activityTime" type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="活动开始日期" end-placeholder="活动结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="活动类型" prop="activityType">
                  <el-radio-group v-model="form.activityType">
                    <el-radio :label="1">筹备完成活动</el-radio>
                    <el-radio :label="2">筹备进行中活动</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="活动封面大图" prop="activityImage">
                  <MyUpMoreImg  :imagePreview='form.activityImage'  imageLimit="1" text='上传图片/视频' @change="imageChange($event,'activityImage')"></MyUpMoreImg>
                  <div>上传图片，尺寸680* 680;</div>
                </el-form-item>
                <el-form-item label="活动封面图" prop="activityCoverImage">
                  <MyUpMoreImg  :imagePreview='form.activityCoverImage'  imageLimit="1" text='上传图片' @change="imageChange($event,'activityCoverImage')"></MyUpMoreImg>
                  <div>上传图片或者视频，尺寸680* 290;</div>
                </el-form-item>
                <el-form-item label="活动位置" prop="activityAddress"  class="activityAddress">
                	<el-input type="text" v-model="form.activityAddress" :disabled="!form.activityAddress" placeholder="请输入活动位置" clearable
                		class="textInput" style="width: 500px;">
                    <template slot="append">
                      <span @click="mapVisible = true" style="cursor: pointer;color:#fc5173">从地图中选点</span>
                    </template>
                	</el-input>
                </el-form-item>
                <el-form-item label="初始化报名人数" prop="enrollQuantity">
                  <el-input v-model="form.enrollQuantity" placeholder="请输入初始化报名人数" type="Number" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="活动套餐" prop="goodsSkuStockParamsList">
                  <el-card class="box-card">
                    <el-card class="box-card" style="width: 1500px;" v-for="(item,index) in form.goodsSkuList">
                      <div slot="header" class="clearfix">
                        <span style="font-size: 16px;font-weight: bold;">套餐{{index+1}}</span>
                        <el-button style="float: right; padding:8px 3px 0 3px;font-size:18px" type="text" @click="handleAddCard(index)">{{index=='0'?'新增套餐':'删除套餐'}}</el-button>
                      </div>
                      <div class="d-flex">
                        <el-form-item label="规格名称"  :prop="'goodsSkuList.'+index+'.specName'" :rules="rules.specName" label-width="70px" style="width: 400px;padding-right:20px">
                          <el-input v-model="item.specName" placeholder="请输入规格名称" maxlength="20" show-word-limit/>
                        </el-form-item>

                        <el-form-item label="活动价" :prop="'goodsSkuList.'+index+'.salePrice'" :rules="rules.salePrice" label-width="60px">
                          <el-input v-model="item.salePrice" placeholder="请输入活动价" type="Number" />
                        </el-form-item>
                        <el-form-item label="库存量" :prop="'goodsSkuList.'+index+'.stockNum'" :rules="rules.stockNum" label-width="60px" style="padding:0 20px">
                          <el-input v-model="item.stockNum" placeholder="请输入库存量" type="Number"  />
                        </el-form-item>
                        <el-form-item label="限购数量" :prop="'goodsSkuList.'+index+'.limitBuyNumber'" :rules="rules.limitBuyNumber" label-width="70px" style="padding-right:20px">
                          <el-input v-model="item.limitBuyNumber" placeholder="请输入限购数量" type="Number"  />
                        </el-form-item>

                        <el-form-item label="规格弹窗图" :prop="'goodsSkuList.'+index+'.specImage'" :rules="rules.specImage" label-width="90px" >
                          <MyUpMoreImg  :imagePreview='item.specImage'  imageLimit="1" text='上传主图' @change="imageCardChange($event,'specImage',index)"></MyUpMoreImg>
                        </el-form-item>
                        <el-form-item label="成功引导图" :prop="'goodsSkuList.'+index+'.guideImage'" :rules="rules.guideImage" label-width="90px" style="padding:0 14px">
                          <MyUpMoreImg  :imagePreview='item.guideImage'  imageLimit="1" text='上传主图' @change="imageCardChange($event,'guideImage',index)"></MyUpMoreImg>
                        </el-form-item>
                        <el-form-item label="着数封面图" :prop="'goodsSkuList.'+index+'.skuCoverImage'"  label-width="90px" >
                          <MyUpMoreImg  :imagePreview='item.skuCoverImage'  imageLimit="1" text='上传主图' @change="imageCardChange($event,'skuCoverImage',index)"></MyUpMoreImg>
                        </el-form-item>
                      </div>
                      <div style="padding:20px 0px 10px 0; ">
                        <el-table :data="item.skuDetailsList" style="width: 100%;"  border  stripe v-loading="loading">
                          <el-table-column prop="customerId" label="套餐选中" align="center">
                            <template #default="scope">
                              {{scope.row.goodsName}}
                              <el-button
                                type="primary"
                                 size="small"
                                @click="handleCheckShop(index,scope.$index)"
                              >选中商品</el-button>
                            </template>
                          </el-table-column>
                          <el-table-column prop="costPrice" label="成本价" align="center" width="180">
                            <template #default="scope">
                               <el-input v-model="scope.row.costPrice" placeholder="请输入成本价" disabled type="Number" />
                            </template>
                          </el-table-column>
                          <el-table-column prop="goodsName" label="套餐名称" align="center">
                            <template #default="scope">
                              <el-input v-model="scope.row.goodsName" placeholder="请输入套餐名称" maxlength="20" show-word-limit/>
                            </template>
                          </el-table-column>
                          <el-table-column prop="number" label="套餐数量" align="center" width="240">
                            <template #default="scope">
                              <el-input-number v-model="scope.row.number"  :min="1" :max="10" label="描述文字"></el-input-number>
                            </template>
                          </el-table-column>
                          <el-table-column prop="unit" label="数量单位" align="center" width="120">
                            <template #default="scope">
                              <el-input v-model="scope.row.unit"   label="数量单位"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column prop="name"  label="操作" width="140">
                            <template #default="scope">
                              <el-button
                                  size="medium"
                                  @click="handleShopRow(index,scope.$index)"
                                >{{scope.$index=='0'?"新增一列":"删除当前列"}}</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div>
                        <el-form-item label="活动保障/自定义内容" prop="useRule" label-width="150px" style="width: 1360px;">
                          <el-input v-model="item.useRule" placeholder="请输入活动保障/自定义内容" maxlength="500" show-word-limit/>
                        </el-form-item>
                      </div>
                    </el-card>
                  </el-card>
                </el-form-item>
                <el-form-item label="活动内容" prop="activityDetails">
                  <QuillEditor  :value.sync="form.activityDetails" />
                </el-form-item>

              </div>
            </el-card>
          </el-form>
        </div>
      </div>
    </div>
    <div class="activeBox">
      <el-button type="primary" @click="handleSubmit('form')"  v-loading="btnLoading">发布</el-button>
    </div>

    <!--	选择商品	-->
    <el-dialog title="选择商品" :visible.sync="productsDialogVisible" :close-on-click-modal="false" v-dialogDrag>
      <div class="search-box">
        <el-form :inline="true" :model="shopDialog" size="small" ref="shopDialog" @submit.native.prevent
          class="demo-form-inline d-flex " id="searchBox"  style="flex-wrap: wrap;">
          <el-form-item prop="goodsCode" style="width:200px">
              <el-input v-model="shopDialog.goodsCode" clearable placeholder="商品编号"></el-input>
          </el-form-item>
          <el-form-item prop="goodsName" style="width:200px">
              <el-input v-model="shopDialog.goodsName" clearable placeholder="商品名称"></el-input>
          </el-form-item>
         <el-form-item prop="storeName" style="width:200px">
            <el-input v-model="shopDialog.storeName" clearable placeholder="商家门店名称"></el-input>
          </el-form-item>

          <el-form-item class="clearfix">
            <el-button type="primary" @click="handleShopSearch()" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    	<el-row :gutter="20">
    		<el-col :span="4" v-for="(item, index) in shopDialogList" :key="index">
    			<el-card :body-style="{ padding: '0px' }" shadow="always" style="margin-bottom: 10px;">
    				<img :src="item.goodsImage" height="185">
    				<div style="padding: 14px;">
    					<p style="height: 40px;line-height: 20px;margin-bottom: 15px;" class="ellipsis-item2">{{item.goodsName}}({{item.goodsCode}})</p>
    					<el-button size="small" @click="handleYesShop(item)">选择</el-button>
    				</div>
    			</el-card>
    		</el-col>
    	</el-row>
      <MyPagination
        :total="shopDialog.total"
        :page.sync="shopDialog.pageNum"
        :limit.sync="shopDialog.pageSize"
        @pagination="getShopList"
      />
    	<div slot="footer" class="dialog-footer">
    		<el-button size="small" @click="productsDialogVisible = false">取 消</el-button>
    	</div>
    </el-dialog>
    <!--	选择商品	-->
    <el-dialog title="选择定位" width="1200px" v-dialogDrag :close-on-click-modal="false" :visible.sync="mapVisible"
    	@close="mapVisible = false" class="mapBox">
    	<qq-map map-key="T23BZ-PHZHD-LMY4N-PIPBF-R636H-S2F4K" key-name="qdStoreAdmin" @callback="callback"
    		@hideMap="showMap = false"></qq-map>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="mapVisible = false" size="small">取 消</el-button>
    		<el-button type="primary" @click="selectMapLocation" size="small" :loading="btnLoading">确 定</el-button>
    	</div>
    </el-dialog>

  </div>
</template>

<script>
  import { BactivityGoodsAddActivityGoods,BgetActivityGoodsDetails,BupdateGoods,BgoodsGetList,BupdateActivityGoods,BgetGoodsList  } from '@/api/getData';
  import option from '../../common/option.js';
  import common from "@/api/api";
  import { regionData,CodeToText } from 'element-china-area-data';
  import QuillEditor from '@/components/QuillEditor/quillEditor';
  import QqMap from '@/components/Qqmap/qqmap'
  export default {
    name:'shopDetails',
    components: { QuillEditor,QqMap },
    inject: ['reload'],
    data() {
      let that = this
      return {
        loading:false,
        imgVisible:false,
        btnLoading:false,
        mapVisible:false,
        showMap:false,
        activityId:'',
        storeMsgForm:{
          mapName:''
        },
        form:{
          activityId:'',
          activityName:'',
          activityImage:"",
          activityType:1,
          activityCoverImage:"",//封面图
          latitude:'',
          longitude:'',
          activityAddress:'',//活动地址
          mapAddress:'',//地图定位地址
          activityDetails:'',
          activityStartTime:'',
          activityEndTime:'',
          activityTime:[],
          enrollQuantity:0,
          goodsSkuList:[{
            specName:'',//规格名称
            salePrice:'',//活动价
            stockNum:'',//库存量
            specImage:'',//规格图片
            skuCoverImage:'',//sku封面图
            limitBuyNumber:1,//限购数量
            guideImage:'',//付款成功图片
            useRule:'',//自定义内容
            skuDetailsList:[{
              goodsId: '',
              goodsName: '',//商品名称
              costPrice:'',//成本价
              number:'',//数量
              unit:'',//数量单位
              storeId:'',//商家ID
            }]
          }]
        },

        rules: {
          activityName: [{required: true, message: '请输入活动名称',trigger: 'blur'}],
          activityTime: [{required: true, message: '请输入活动日期',trigger: 'blur'}],
          activityImage: [{required: true, message: '请上传详情顶部图',trigger: 'blur'}],
          activityCoverImage: [{required: true, message: '请上传活动封面图',trigger: 'blur'}],
          activityAddress: [{required: true, message: '请从地图中选中活动位置',trigger: 'blur'}],
          activityDetails: [{required: true, message: '请输入活动内容',trigger: 'blur'}],

          specName: [{required: true, message: '请输入规则名称',trigger: 'blur'}],
          limitBuyNumber: [{required: true, message: '请输入限购数量',trigger: 'blur'}],
          salePrice: [{required: true, message: '请输入活动价',trigger: 'blur'}],
          stockNum: [{required: true, message: '请输入库存量',trigger: 'blur'}],
          specImage: [{required: true, message: '请输入规则弹窗图',trigger: 'blur'}],
          guideImage: [{required: true, message: '请输入成功引导图',trigger: 'blur'}],
        },

        shopDialogList:[],
        productsDialogVisible:false,
        shopDialog:{
          goodsCode:"",
          goodsName:'',
          storeName: '',
          total:0,
          pageNum:1,
          pageSize:20,
        },
        parentIndex:'',
        index:'',


      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
			this.activityId = this.$route.query.id;
      if(this.activityId){
        this.editDataInfo();
      }

    },
    methods: {

      /** 地图选择回调 **/
      callback(mapData) {
      	this.showMap = false;
      	this.mapData = mapData;
      },
      /** 选择地图中的点 **/
      selectMapLocation() {
        console.log(this.mapData)
      	this.mapVisible = false;
      	this.form.activityAddress = this.mapData.poiname;
        this.form.mapAddress = this.mapData.poiaddress;
      	this.form.latitude = this.mapData.latlng.lat;
      	this.form.longitude = this.mapData.latlng.lng;
      },
      handleYesShop(item){//弹框点击选中商品
         this.form.goodsSkuList[this.parentIndex].skuDetailsList[this.index].goodsName = item.goodsName;
         this.form.goodsSkuList[this.parentIndex].skuDetailsList[this.index].costPrice = item.costPrice;
         this.form.goodsSkuList[this.parentIndex].skuDetailsList[this.index].goodsId = item.goodsId;
         this.form.goodsSkuList[this.parentIndex].skuDetailsList[this.index].storeId = item.storeId;
         this.productsDialogVisible = false;
      },
      handleShopRow(parentIndex,index){//表格新增一列
        if(index==0){//新增
          this.form.goodsSkuList[parentIndex].skuDetailsList.push({
              goodsId: '',
              goodsName: '',//商品名称
              costPrice:'',//成本价
              number:'',//数量
              unit:'',//数量
              storeId:'',//商家ID
          })
        }else{
          this.form.goodsSkuList[parentIndex].skuDetailsList.splice(index,1)
        }
      },
      handleAddCard(index){//新增删除套餐
        if(index==0){//新增
          this.form.goodsSkuList.push({
            specName:'',//规格名称
            salePrice:'',//活动价
            stockNum:'',//库存量
            specImage:'',//规格图片
            skuCoverImage:'',//sku封面图
            limitBuyNumber:1,//限购数量
            guideImage:'',//付款成功图片
            useRule:'',
            skuDetailsList:[{
              goodsId: '',
              goodsName: '',//商品名称
              costPrice:'',//成本价
              number:'',//数量
              unit:'',//数量单位
              storeId:'',//商家ID
            }]
          })
        }else{//删除
          this.form.goodsSkuList.splice(index,1)
        }
      },
      handleCheckShop(parentIndex,index){//表格点击选中商品
        this.productsDialogVisible = true;
        this.parentIndex = parentIndex;
        this.index = index;
        this.getShopList();
      },
      async getShopList(){//获取弹框的商品列表
        try {
          this.dialogLoading = true;
          let data = {
            pageNum: this.shopDialog.pageNum,
            pageSize: this.shopDialog.pageSize,
            auditStatus: "2",
            goodsCode:this.shopDialog.goodsCode,
            goodsName:this.shopDialog.goodsName,
            goodsType:'2',
            storeName:this.shopDialog.storeName,
          };
          const result = await BgetGoodsList(data);
          if (result.code == 200) {
            this.shopDialog.total = result.total;
            this.shopDialogList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.dialogLoading = false;
        } catch (err) {
          this.dialogLoading = false;
          console.log(err)
        }
      },
      editDataInfo(){
        BgetActivityGoodsDetails({activityId:this.activityId}).then((result) => {
          if (result.code == 200) {
            let data = result.data;
            data.activityTime = [data.activityStartTime.substring(0,10),data.activityEndTime.substring(0,10)];
            data.activityCoverImage = data.activityCoverImage.split(',');
            data.activityImage = data.activityImage.split(',');
            for(let i=0;i<data.goodsSkuList.length;i++){
              data.goodsSkuList[i].specImage = data.goodsSkuList[i].specImage.split(',');
              data.goodsSkuList[i].guideImage = data.goodsSkuList[i].guideImage.split(',');
              data.goodsSkuList[i].skuCoverImage = data.goodsSkuList[i].skuCoverImage?(data.goodsSkuList[i].skuCoverImage.split(',')):[];
            }

            this.form = data;
          } else {
            this.$message.error(result.message);
          }
        });
      },

      imageChange(path, name) {
      	this.form[name] = path;
      },
      imageCardChange(path, name, index){
        this.form.goodsSkuList[index][name] = path;
      },
      handleSubmit(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {

            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.form))
            data.activityStartTime = data.activityTime[0];
            data.activityEndTime = data.activityTime[1];
            data.activityCoverImage = data.activityCoverImage.join(',');
            data.activityImage = data.activityImage.join(',');
            for(let i=0;i<data.goodsSkuList.length;i++){
              data.goodsSkuList[i].specImage = data.goodsSkuList[i].specImage.join(',');
              data.goodsSkuList[i].guideImage = data.goodsSkuList[i].guideImage.join(',');
              if(data.goodsSkuList[i].skuCoverImage){
                data.goodsSkuList[i].skuCoverImage = data.goodsSkuList[i].skuCoverImage.join(',');
              }

            }

            let result;
            if(this.form.activityId){
              result = await BupdateActivityGoods(data);
            }else{
              result = await BactivityGoodsAddActivityGoods(data);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);

            } else {
              this.$message.error(result.message);
            }
            this.btnLoading = false;
            this.$router.go(-1);
          }
        })
      },
      back(){
          this.$router.go(-1);//返回上一层
      },
    }
  }
</script>

<style scoped lang="scss">
  .box{
     width:380px;
     border:1px solid #999;
     border-radius: 10px;
     padding:15px;
  }
  .boxTop .botTopItem.botTopItemActive{
    border: 1px solid #FC5173;
    background: rgba(252,81,115,0.05);
  }
  .boxTop{
    display: flex;
  }
  .boxTop .botTopItem{
   padding:0 20px;

    height: 100rpx;
    background: #F1F1F1;
    border-radius: 10px;
    color:#666;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right:20px;
  }
  .boxContentTitle{
    display: flex;
    color:#333;
    align-items: center;
  }
  .dian{
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color:#333;
    font-size: 20px;
    margin-right:5px;
  }
  .boxContentItem{
    display: flex;
    width: 100%;
    justify-content: space-between;
       padding-left:10px;
  }
  .bciRNumber{
    margin-right:10px;
  }



  .tableBox /deep/ .el-form-item__content{
    width:100%;
    overflow-x: auto;
  }
  .shop-box /deep/ .el-form-item__label{
    padding:0px;
  }
  .miniTips{
    font-size: 12px;
    color:#CCC4CC;
    padding-left:4px;
  }
  .box-card{
    margin-bottom: 15px;
  }
  .headerTitle{
    font-size: 16px;
    font-weight: bold;
  }
	.index-box /deep/ .ql-editor{
		min-height: 300px;
	}
	.boxs /deep/ .el-radio-group{
  	display: flex;
  	flex-wrap: wrap;
  }
  .boxs /deep/ .el-radio-group .el-radio{
  	width:100%;
  	margin-bottom: 10px;
  }
  .activeBox{
    display:flex;
    justify-content:center;
  }
  .upGoodBox{
    height:100px;
    display:flex;
    align-items:center;
    justify-content: center;
    background: rgba(158, 187, 169, 0.15);
    color:#3A7654;
    margin-bottom:20px;
  }
  .shop-box{
    margin: 0 auto;
    .left{
      width:80%;
      padding:0 10px;
      margin: auto;
    }
    // .right{
    //   width:35%;
    //   padding:0 10px;
    // }
  }
  .el-checkbox-group{
    display: flex;
    flex-direction: column;
  }
  .jobNumber{
    text-align:center;
    color:#606266;
    margin:0;
  }
  .index-box /deep/ .el-checkbox{
    margin-bottom:15px;
  }
  .auditBox{
    padding: 20px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    .steps{
      max-width:500px;
      margin:0 auto;
    }
  }
  .goodSet{
    padding: 50px 50px 30px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    color:#606266;
    .title{
      text-align: center;
      font-size:18px;
      margin-bottom:10px;
    }
  }
  .el-icon-edit-outline{
    color: rgb(97, 153, 122);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /*.myQuillEditor{
    height:250px;
  }*/
  table {
    width: 100%;
  }

  th {
    height: 50px;
    text-align: left;
    border-bottom: 1px solid #EBEEF5!important;
    color:#909399;
    padding:0 5px;

  }
  table{
    border: 1px solid #EBEEF5;
  }
  td, th{
    border:none;
    white-space: nowrap;
    min-width: 80px;
  }
  td{padding:5px}
  .index-box{
    height:100%;
    overflow-y: auto;
  }
  .shop-box{
    margin: 0 auto;
    .left{
      width:90%;
      padding:0 10px;
    }
    // .right{
    //   width:35%;
    //   padding:0 10px;
    // }
  }
  .rows>div,.rows>button{
    margin-bottom: 5px;
  }
  .input{
    width:150px;
    margin-right:10px;
  }
  .form{
    padding:20px 0;
  }
   .form /deep/ .avatar-uploader .el-upload-list__item{display: none;}
  .avatar-uploader{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height:100px;
      width:100px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 28px;
        color: #8c939d;
    }
    .d-flex /deep/ .el-upload{
      display: block;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
    .text{
      margin: 0px;
      color: #8c939d;
    }
    .upImg /deep/ .el-upload--text{
      height:100%
    }
    .activeBox{
      display: flex;
      justify-content: center;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width:100px;
        height:100px;
    }
</style>
